<script setup lang="ts">
import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue';
import { XMarkIcon } from '@heroicons/vue/24/outline';
import type { Photo } from '../types';

defineProps<{
  photo: Photo | null;
  isOpen: boolean;
  onClose: () => void;
}>();
</script>

<template>
  <TransitionRoot appear :show="isOpen" as="template">
    <Dialog as="div" class="relative z-50" @close="onClose">
      <TransitionChild
        enter="ease-out duration-300"
        enter-from="opacity-0"
        enter-to="opacity-100"
        leave="ease-in duration-200"
        leave-from="opacity-100"
        leave-to="opacity-0"
      >
        <div class="fixed inset-0 bg-black/90 backdrop-blur-xl" />
      </TransitionChild>

      <div class="fixed inset-0 overflow-y-auto">
        <div class="flex min-h-full items-center justify-center p-4">
          <TransitionChild
            enter="ease-out duration-300"
            enter-from="opacity-0 scale-95"
            enter-to="opacity-100 scale-100"
            leave="ease-in duration-200"
            leave-from="opacity-100 scale-100"
            leave-to="opacity-0 scale-95"
          >
            <DialogPanel class="relative w-full max-w-5xl transform rounded-2xl bg-transparent p-6">
              <button
                @click="onClose"
                class="absolute top-2 right-2 z-10 p-2 rounded-full bg-black/50 hover:bg-black/70 transition-colors"
              >
                <XMarkIcon class="h-6 w-6 text-white" />
              </button>
              
              <div v-if="photo" class="max-h-[85vh] overflow-hidden rounded-xl">
                <img
                  :src="photo.url"
                  :alt="photo.title"
                  class="w-full h-full object-contain"
                />
              </div>
              
              <div v-if="photo" class="mt-4 text-center">
                <h2 class="text-2xl font-semibold text-white">{{ photo.title }}</h2>
                <p class="mt-2 text-gray-300">{{ photo.description }}</p>
              </div>
            </DialogPanel>
          </TransitionChild>
        </div>
      </div>
    </Dialog>
  </TransitionRoot>
</template>